<template>
  <div class="table-wrap">
    <el-table :data="tableData" :span-method="handleSpanMethod" :cell-style="{ background: '#FFFFFF' }" border
      style="width: 100%">
      <el-table-column label="通道信息设置" align="center">
        <el-table-column prop="orderTypeName" label="订单分类" align="center" />
        <el-table-column prop="tradeKindName" label="交易方式" align="center" />
        <el-table-column prop="tradeTypeName" label="交易类型" align="center" />
        <el-table-column prop="cardTypeName" label="卡类型" align="center" />
        <el-table-column prop="rate" label="成本手续费(%)" align="center">
            <template slot-scope="scope">
            <el-input @mousewheel.native.prevent @DOMMouseScroll.native.prevent style="width: 100% !important;"
                type="number" placeholder="请输入内容" v-model="scope.row.rate" :disabled="chageType">
            </el-input>
            </template>
        </el-table-column>
        <el-table-column prop="rateMin" label="手续费保底值(元)" align="center">
            <template slot-scope="scope">
            <el-input @mousewheel.native.prevent @DOMMouseScroll.native.prevent style="width: 100% !important;"
                type="number" placeholder="请输入内容" v-model="scope.row.rateMin" :disabled="chageType">
            </el-input>
            </template>
        </el-table-column>
        <el-table-column prop="rateMax" label="手续费封顶值(元)" align="center">
            <template slot-scope="scope">
            <el-input @mousewheel.native.prevent @DOMMouseScroll.native.prevent style="width: 100% !important;"
                type="number" placeholder="请输入内容" v-model="scope.row.rateMax" :disabled="chageType">
            </el-input>
            </template>
        </el-table-column>
        <el-table-column prop="rateScale" label="结算比例(%)" align="center">
            <template slot-scope="scope">
            <el-input @mousewheel.native.prevent @DOMMouseScroll.native.prevent style="width: 100% !important;"
                type="number" max="100" placeholder="请输入内容" v-model="scope.row.rateScale" :disabled="chageType">
            </el-input>
            </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import compAislePolicyService from '@/api/compaisle/compAislePolicyService'

export default {
  name: 'myTable',
  data() {
    return {
      newTableData: [],
      tableData: [],
      chageType: false,
      // 合并单元格
      oneArr: [], // oneArr
      oneIndex: 0, // oneArr索引
      twoArr: [],
      twoIndex: 0,
      threeArr: [],
      threeIndex: 0,
      fourArr: [],
      fourIndex: 0,
    }
  },
  methods: {
    /**
     * 初始化表格数据
     * @param {*} type 是否尽查看
     * @param {*} datas 表格数据
     */
    initTableData(type, datas) {
      this.chageType = (type == 'view') || false;
      this.tableData = []
      this.newTableData = datas;
      let newData = JSON.parse(JSON.stringify(this.newTableData));
      newData.map((res, index) => {
        const parentId = index
        this.tableData.push.apply(
          this.tableData,
          this.handleData([res], parentId)
        )
      })
      this.mergeTable(this.tableData)
    },
    // table 表格数据初始化处理，将树结构数据转为一维数组
    handleData(data, parentId) {
      data.map((res, index) => {
        let obj = {
          ids: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    },
    // 初始化合并行数组
    mergeInit() {
      this.oneArr = [] // oneArr
      this.oneIndex = 0 // oneArr索引
      this.twoArr = []
      this.twoIndex = 0
      this.threeArr = []
      this.threeIndex = 0
      this.fourArr = []
      this.fourIndex = 0
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在，以第一行为基准
            this.oneArr.push(1) // oneArr
            this.oneIndex = 0

            this.twoArr.push(1)
            this.twoIndex = 0

            this.threeArr.push(1)
            this.threeIndex = 0

            this.fourArr.push(1)
            this.fourIndex = 0

          } else {
            // 判断当前元素与上一元素是否相同 one
            if (
              data[i].orderTypeName === data[i - 1].orderTypeName &&
              data[i].orderType === data[i - 1].orderType
            ) {
              this.oneArr[this.oneIndex] += 1
              this.oneArr.push(0)
            } else {
              this.oneArr.push(1)
              this.oneIndex = i
            }

            // two
            if (
              data[i].tradeKindName === data[i - 1].tradeKindName &&
              data[i].tradeKind === data[i - 1].tradeKind
            ) {
              this.twoArr[this.twoIndex] += 1
              this.twoArr.push(0)
            } else {
              this.twoArr.push(1)
              this.twoIndex = i
            }

            // three
            if (
              data[i].tradeTypeName === data[i - 1].tradeTypeName &&
              data[i].tradeType === data[i - 1].tradeType
            ) {
              this.threeArr[this.threeIndex] += 1
              this.threeArr.push(0)
            } else {
              this.threeArr.push(1)
              this.threeIndex = i
            }

            // four
            if (
              (data[i].cardTypeName === data[i - 1].cardTypeName &&
                data[i].cardType === data[i - 1].cardType) && data[i].cardTypeName != ' '
            ) {
              this.fourArr[this.fourIndex] += 1
              this.fourArr.push(0)
            } else {
              this.fourArr.push(1)
              this.fourIndex = i
            }

          }
        }
      }
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列 tradeType
        const _row_1 = this.oneArr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 1) {
        // 第二列 type
        const _row_2 = this.twoArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 2) {
        // 第三列 cardType
        const _row_2 = this.threeArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 cardType
        const _row_2 = this.fourArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }
  }
}
</script>
</style>